<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      window.onload = function () {
        var btn01 = document.getElementById("btn01");
        // btn01.onclick = function () {
        /**
         * 使用对象.事件=函数的形式绑定响应函数，
         * 它只能同时为一个元素绑定一个响应函数，
         * 不能绑定多个
         */

        /**
         * addEventListener()
         *  通过这个方法也可以为元素绑定响应函数
         *  参数:
         *   1.事件的字符串，不要on
         *   2.回调函数，当事件触发时该函数会被调用
         *   3.是否在捕获阶段触发事件，需要一个布尔值，一般传false
         * IE8及以下只有1.2.参数并且是后绑定先执行
         *
         */
        btn01.addEventListener(
          "click",
          function () {
            alert(1);
          },
          false
        );
        btn01.addEventListener(
          "click",
          function () {
            alert(2);
          },
          false
        );
      };
      //   定义一个函数，用来为指定元素绑定响应函数
      /**
     *addEventListener()中的this，是绑定事件的对象
     addEventListener（）中的this是windw
     */
      /**
       * 参数：
       *   obj 要绑定事件的对象
       *   eventStr 事件的字符串
       *   callback 回调函数
       */
      function bind(obj, eventStr, callback) {
        if (obj.addEventListener) {
          // 大部分浏览器兼容的方式
          obj.addEventListener(eventStr, callback, false);
        } else {
          // IE8及以下
          obj.attachEvent(eventStr, callback);
        }
      }
    </script>
  </head>
  <body>
    <button id="btn01">点击</button>
  </body>
</html>
